<template>
  <div class="switch" id="switch-cnt">
    <div class="switch__circle"></div>
    <div class="switch__circle switch__circle--t"></div>
    <div class="switch__container" id="switch-c1">
      <h2 class="switch__title title">Welcome Back !</h2>
      <p class="switch__description description">To keep connected with us please login with your personal info</p>
      <button class="switch__button button switch-btn" @click="change">SIGN IN</button>
    </div>
    <div class="switch__container is-hidden" id="switch-c2">
      <h2 class="switch__title title">Hello Friend !</h2>
      <p class="switch__description description">Enter your personal details and start journey with us</p>
      <button class="switch__button button switch-btn" @click="change">SIGN UP</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import useEmitter from '../../../hooks/useEmitter.js'

const sidebarOpen = ref(true)
const emitter = useEmitter()

const change = () => {
  // 获取需要切换的元素
  const switchC1 = document.querySelector("#switch-c1");    // 登录切换容器
  const switchC2 = document.querySelector("#switch-c2");    // 注册切换容器
  const switchCircle = document.querySelectorAll(".switch__circle");  // 动画圆圈
  const switchCtn = document.querySelector("#switch-cnt");   // 切换容器

  // 添加过渡动画效果
  switchCtn.classList.add("is-gx");
  setTimeout(function () {
    switchCtn.classList.remove("is-gx");
  }, 1500)

  // 切换各个元素的类名来触发动画
  switchCtn.classList.toggle("is-txr");        // 容器位移
  switchCircle[0].classList.toggle("is-txr");  // 圆圈1位移
  switchCircle[1].classList.toggle("is-txr");  // 圆圈2位移
  switchC1.classList.toggle("is-hidden");      // 切换登录内容显示/隐藏
  switchC2.classList.toggle("is-hidden");      // 切换注册内容显示/隐藏

  // 通过事件发射器通知其他组件
  sidebarOpen.value = !sidebarOpen.value
  emitter.emit('change', sidebarOpen.value)
}
</script>

<style scoped lang="scss">
@import './login.scss';
/* 
将源码中的css样式单独存放,在各组件中导入就可以。
后续整理代码时建议，将全局样式和局部样式分开。 
*/
</style>